<template>
  <el-drawer
    title="编辑项目类型"
    :visible="drawer"
    @close="close"
    size='650px'
    direction="rtl">
    <el-card style="margin: 10px;">
      <el-transfer
        filterable
        :titles="['未选择项目','已选择项目']"
        :filter-method="filterMethod"
        filter-placeholder="请输入项目类型"
        v-model="innerValue"
        :data="data">
      </el-transfer>
    </el-card>
    <div align="center">
      <el-button type="dark" style="margin: 10px;" icon="el-icon-edit" @click="submit" plain>提交</el-button>
      <el-button type="dark" style="margin: 10px;" icon="el-icon-edit" @click="close" plain>取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {save} from "@/api/orgType"

export default {
  props: {
    drawer: Boolean,
    data: {
      type: Array,
      default: () => {
        return [{
            key: null,
            label: null,
          }]
      }
    },
    valueNow:Array,
    orgInfo:Object
  },
  watch: {
    'drawer': function (v) {
      if (v) {
        this.innerValue = this.valueNow
      }
    }
  },
  data() {
    return {
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      orgTypesList: {
        orgId: 0,
        typeIds: []
      },
      innerValue: []
    };
  },
  methods: {
    close() {
      this.$emit("close", false)
    },
    submit() {
      this.orgTypesList.orgId = this.orgInfo.id
      this.orgTypesList.typeIds = this.valueNow
      save(this.orgTypesList).then(() => {
        this.close()
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        });
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '保存失败'
        })
      })
    }
  }
};
</script>

<style scoped>

</style>
